import base from '../base.js'

import RowPiece from '../../api/schedules.js'
import queryMoies from '../../api/movies.js'
// import "../../lib/layui/layui.js"

export default class extends base {

    sched = {}
    price = ['15元', '30元', '45元','50元']
    infor = {}
    thea = {}
    data = {
        // 用来描述学生列表数据
        rows: [],
        // 当前页
        curpage: 1,
        // 每页显示条数
        eachpage: 5,
        // 总条数
        total: 0,
        // 总页数
        maxpage: 0,
    }
    bb={}
    render() {
        this.$el.html(`
            <h1 style='margin-bottom:15px'>排片管理</h1>
            <div class="search-box" style='margin-bottom:20px' >
                <form class="layui-form"  lay-filter="formTest" style="display:flex">
                    <label class="layui-form-label">电影名</label>
                    <input type="text"  name="cname" lay-verify="title" autocomplete="off" placeholder="请输入电影名" class="layui-input" style="width:150px">      
                    <label class="layui-form-label">电影类型</label>
                    <input type="text" name="type"  lay-verify="title" autocomplete="off" placeholder="请输入电影的类型" class="layui-input" style="width:150px">
                    <label class="layui-form-label">上映地区</label>
                    <input type="text" name="area" lay-verify="title" autocomplete="off" placeholder="请输入上映地区" class="layui-input" style="width:150px">
                    <label class="layui-form-label">上映时间</label>
                    <input type="text" name="upDate" lay-verify="title" autocomplete="off" placeholder="请输入上映时间" class="layui-input" style="width:150px">
                    <button type="button" class="layui-btn query" lay-submit="" lay-filter="demo1" style="margin-left: 20px">查询</button>
                </form>
            </div>
            <hr/>
            <table id="demo" lay-filter="test"></table>
            <div id="page"></div>
        `)
        this.table = layui.table;
        this.laypage = layui.laypage;
        this.form = layui.form;
        this.query=$('.query')
    }
    handle() {
        this.query.on('click',()=>this.quermovies())
        $(".search-box label").css({
            "width": "60px",
        })
    }
   async quermovies(){
        let aadata= this.form.val("formTest")
        aadata.curpage = this.data.curpage
        aadata.eachpage = this.data.eachpage
        
       this.bb= await queryMoies.searchMovies(aadata)
        console.log(this.bb);
        this.table.reload("demo", {
            data: this.bb.rows,
        });

        layui.use('laypage', () => {
            this.laypage.render({
                elem: 'page'
                , count: this.bb.total
                , layout: ['prev', 'page', 'next', 'count', 'limit']
                , limits: [5, 10, 15]
                , limit: this.bb.eachpage
                , curr: this.bb.curpage
                , jump: async (obj, first) => {
                    if (!first) {
                        aadata.curpage=obj.curr
                        aadata.eachpage=obj.limit
                        this.bb= await queryMoies.searchMovies(aadata)
                        this.table.reload("demo", {
                            data: this.bb.rows,
                            limit: this.bb.eachpage,
                        });
                    }
                }
            });
        });
    }

    mounted() {
        this.getmov();

    }
    async getmov() {
        const { curpage, eachpage } = this.data
        this.data = await RowPiece.getmovies({ curpage, eachpage });
        this.sched = await RowPiece.sche()
        this.rerender()
    }
    rerender() {
        layui.use('table', () => {
            this.table.render({
                elem: "#demo"
                , cols: [[ //表头
                    , { field: 'cname', title: '电影名称' }
                    , { field: 'type', title: '电影类型' }
                    , { field: 'time', title: '电影时长' }
                    , { field: 'upDate', title: '上映时间' }
                    , { field: 'area', title: '上映地区' }
                    , {
                        field: '', title: '操作', templet: res => {
                            const { _id } = res
                            return `
                            <button lay-event="button"  id="withExport" _id="${_id}" type="button" class=" layui-btn layui-btn-xs layui-btn-normal" >排片</button>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">查看排片</a>
                            
                         `
                        }
                    }
                ]]
            });
            this.table.reload("demo", {
                data: this.data.rows,
            });
        });
        layui.use('laypage', () => {
            console.log(this.data);
            this.laypage.render({
                elem: 'page'
                , count: this.data.total
                , layout: ['prev', 'page', 'next', 'count', 'limit',]
                , limits: [5, 10, 15]
                , limit: this.data.eachpage
                , curr: this.data.curpage
                , jump: async (obj, first) => {
                    if (!first) {
                        this.data.curpage = obj.curr
                        this.data.eachpage = obj.limit
                        const { curpage, eachpage } = this.data
                        this.data = await RowPiece.getmovies({ curpage, eachpage });
                        this.table.reload("demo", {
                            data: this.data.rows,
                            limit: this.data.eachpage,
                        });
                    }
                }
            });
        });

        this.table.on('tool(test)', obj => {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            if (layEvent === 'edit') {
                location.hash = `#/info/schedules/examine/${data._id}`
            }
            if (layEvent === 'button') {
                layer.open(
                    {
                        title: '选择影院',
                        type: 1,
                        content: `
                     <div style="padding:20px;">
                        <div class="layui-form-item" >

                            <label class="layui-form-label" style="width:auto;" >电影：</label>
                            <div class="layui-input-inline">
                            <input type="text" style="width:180px; " name="movies" id="movies" value=${data.cname} _id='${data._id}'  class="layui-input" readonly>
                            </div>

                        </div>
                        <div class="layui-form-item" >

                            <label class="layui-form-label" style="width:auto;" >影院：</label>
                            <div class="layui-input-inline">
                            <select name="cinemas" style="width:180px; "  id="cinemas" class="layui-select" >${_.map(this.sched.getcinemas, item => { return  `${item.status?`<option class='op' value="${item._id}">${item.name}</option>`:''}` }).join('')}</select>                            </div>
                                                                                                               
                        </div>
                        <div class="layui-form-item" >

                            <label class="layui-form-label" style="width:auto;" >映厅：</label>
                            <div class="layui-input-inline">
                            <select name="theaters"style="width:180px;" class="layui-select" id="theaters"></select>
                            </div>
                        </div>
                        <div class="layui-form-item" >

                            <label class="layui-form-label" style="width:auto;" >价格：</label>
                            <div class="layui-input-inline">
                            <select name="price"style="width:180px;" class="layui-select" id="price"></select>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width:auto;">日期：</label>
                            <div class="layui-input-inline">
                            <input type="date" name="date" class="layui-input" id="test12" >
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width:auto;">时间：</label>
                            <div class="layui-input-inline">
                            <input type="time" name="time"  class="layui-input" id="test4" >
                            </div>
                        </div>


                     </div
                        `
                        , btn: ['保存', '取消'],
                        success: async() => {

                            let cinemasId =  {cinemasId:this.sched.getcinemas[0]._id}
                            this.thea =await RowPiece.gettheaters( cinemasId )

                            $("#theaters").html(`
                            ${_.map(this.thea, item => {
                            return `
                                ${item.status ? `<option value="${item._id}">${item.name}</option>` : ""}
                            ` }).join('')}
                         `)   

                            $("#cinemas").on('change', async (e) => {
                                const aa = $('.op:selected').val()
                                cinemasId  = { cinemasId: aa }
                                this.thea = await RowPiece.gettheaters( cinemasId )
                                $("#theaters").html(`
                                    ${_.map(this.thea, item => {
                                    return `
                                        ${item.status ? `<option value="${item._id}">${item.name}</option>` : ""}
                                    ` }).join('')}
                                 `)

                            })
                            $("#price")
                            $("#price").html(`
                                ${_.map(this.price, item => {
                                return `<option>${item}</option>`
                            }).join('')}
                               
                            `)

                        },
                        yes: async (index, layero) => {
                            //按钮【按钮一】的回调
                            const rseult = {
                                movieId: data._id,
                                cinemasId: $("#cinemas").val(),
                                theaterId: $("#theaters").val(),
                                price: $("#price").val(),
                                showTime: $("input[name=time]").val(),
                                date: $("input[name=date]").val(),
                            }
                            // console.log('rseult',rseult);
                            const aa = await RowPiece.permutation(rseult)
                            console.log(aa);
                            layer.close(index)
                            layer.msg('排片成功', {
                                time: 1500, //20s后自动关闭
                            });

                        }
                    },
                );
            }
        });
    }
}

